<template>
    <div class="wh-100" style="background-color: #fff;height: fit-content;">
        <!--头部-->
        <div class="w-100 fs-16 fw-7 px-20" style="
        height: 60px; 
        border-bottom: 1px solid #e8edf4; 
        line-height: 60px; 
        color: #2d2d2d;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 10px 0;
        ">
            <span>{{ text }}</span>
            <el-button @click="$router.back()" size="mini">
                返回
            </el-button>
        </div>
        <!-- 警告 -->
        <el-alert
            :closable="false"
            title="注：学校与单位经协商后，可由高校管理员调整宣讲说明，学校创建的宣讲会默认审核通过；且单位账号已激活，未激活，单位或者学校创建该单位账号，后再发布"
            type="warning">
        </el-alert>
        <!--内容-->
        <div class="w-100 py-20 overflow-auto" style="height: calc(100% - 40px);box-sizing: border-box;padding-left: 10px;">
            <Form ref="issueRef" :model="issueForm" :rules="issueRules" :label-width="200">
                <FormItem style="width: 600px" label="单位名称" prop="unitName" key="0">
                    <Input v-model="issueForm.unitName" placeholder="请输入单位名称"></Input>
                </FormItem>
                <FormItem style="width: 600px" label="统一社会信用代码" prop="creditCode" key="1">
                    <Input v-model="issueForm.creditCode" placeholder="请输入统一社会信用代码 (18位)"></Input>
                </FormItem>
                <FormItem style="width: 600px" label="关联职位" prop="associatedPosition" key="2">
                    <Input v-model="issueForm.associatedPosition" placeholder="请输入要关联的职位"></Input>
                </FormItem>
                <FormItem label="宣讲时间" key="3" prop="applicationTime">
                    <DatePicker type="datetime" placeholder="开始时间" @on-change="dateChangeA" format="yyyy-MM-dd HH:mm:ss" v-model="issueForm.presentationTime[0]" style=""></DatePicker>
                    <span>&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;</span>
                    <DatePicker type="datetime" placeholder="结束时间" @on-change="dateChangeB" format="yyyy-MM-dd HH:mm:ss" v-model="issueForm.presentationTime[1]" style=""></DatePicker>
                </FormItem>
                <FormItem style="width: 600px" label="期望学生人数" prop="expectNumber" key="4">
                    <el-input-number style="width: 30%;" size="small" v-model="issueForm.expectNumber" :controls="false"></el-input-number>
                </FormItem>
                <FormItem label="宣讲范围" prop="scopeOfPresentation" key="5">
                    <RadioGroup v-model="issueForm.scopeOfPresentation">
                        <Radio label="校级宣讲会">
                            <span>校级宣讲会</span>
                        </Radio>
                        <Radio label="院级宣讲会">
                            <span>院级宣讲会</span>
                        </Radio>
                    </RadioGroup>
                </FormItem>

                <FormItem v-show="issueForm.scopeOfPresentation === '校级宣讲会'" label="意向院系及专业" prop="intention" key="6">
                    <div class="box-intention">
                        <span @click="intentionSelect">意向专业最多可选10个，不选默认不限，点击选择</span>
                    </div>
                    <div class="intention">
                        <!-- 意向院系 -->
                        <div class="intention-title">意向院系</div>
                        <div class="intention-a">
                            <ul>
                                <li v-for="(item) in 30" :key="item">
                                    <span>智能制造学院</span>
                                    <i class="el-icon-error"></i>
                                </li>
                                <li>
                                    <span>财经学院</span>
                                    <i class="el-icon-error"></i>
                                </li>
                            </ul>
                        </div>
                        <!-- 意向院系 -->
                        <div class="intention-title">意向专业</div>
                        <div class="intention-b">
                            <ul>
                                <li v-for="(item) in 30" :key="item">
                                    <span>专科 机电一体化</span>
                                    <i class="el-icon-error"></i>
                                </li>
                                <li>
                                    <span>专科 数控技术</span>
                                    <i class="el-icon-error"></i>
                                </li>
                                <li>
                                    <span>专科 大数据与会计</span>
                                    <i class="el-icon-error"></i>
                                </li>
                            </ul>
                        </div>
                    </div>
                </FormItem>

                <FormItem v-show="issueForm.scopeOfPresentation === '院级宣讲会'" label="意向院系及专业" prop="faculty" key="6-1">
                    <div class="box-intention"></div>
                        <!-- 意向院系 -->
                        <div style="width: 400px;">
                        <Select v-model="issueForm.faculty" filterable no-data-text="暂无数据" placeholder="请选择院系">
                            <Option v-for="item in placeSelections" :key="item.id" :label="item.venueName" :value="item.id"></Option>
                        </Select>
                    </div>
                </FormItem>

                <FormItem>
                    <div class="intention" v-show="issueForm.scopeOfPresentation === '院级宣讲会'">
                        <!-- 意向院系 -->
                        <div class="intention-title">意向专业</div>
                        <div class="intention-b">
                            <ul>
                                <li v-for="(item) in 30" :key="item">
                                    <span>专科 机电一体化</span>
                                    <i class="el-icon-error"></i>
                                </li>
                                <li>
                                    <span>专科 数控技术</span>
                                    <i class="el-icon-error"></i>
                                </li>
                                <li>
                                    <span>专科 大数据与会计</span>
                                    <i class="el-icon-error"></i>
                                </li>
                            </ul>
                        </div>
                    </div>
                </FormItem>

                <FormItem style="width: 600px" label="所属校区" prop="homeCampus" key="7">
                    <Select v-model="issueForm.homeCampus" filterable no-data-text="暂无数据" placeholder="请选择所属校区">
                        <Option v-for="item in placeSelections" :key="item.id" :label="item.venueName" :value="item.id"></Option>
                    </Select>
                </FormItem>
                <FormItem style="width: 600px" label="举办场地" prop="venue" key="8">
                    <Select v-model="issueForm.venue" filterable no-data-text="暂无数据" placeholder="请选择具体举办场地">
                        <Option v-for="item in placeSelections" :key="item.id" :label="item.venueName" :value="item.id"></Option>
                    </Select>
                </FormItem>
                <FormItem style="width: 600px" label="联系人" prop="contactPerson" key="9">
                    <Input v-model="issueForm.contactPerson" placeholder="联系人姓名或称呼"></Input>
                </FormItem>
                <FormItem style="width: 600px" label="联系电话" prop="contactNumber" key="10">
                    <Input v-model="issueForm.contactNumber"  placeholder="联系人的电话: 000-00000000"></Input>
                </FormItem>
                <FormItem style="width: 600px" label="联系人手机号" prop="contactPhone" key="11">
                    <Input v-model="issueForm.contactPhone" placeholder="联系人的手机号"></Input>
                </FormItem>
                <FormItem style="width: 600px" label="企业参会人数" prop="attendee" key="12">
                    <Input v-model="issueForm.attendee" placeholder=""></Input>
                </FormItem>

                <FormItem label="活动封面" prop="activityCover" key="13">
                    <span style="color: #999999">图片说明：图片建议比例16：9，大小不超过10mb，支持jpg、png、gif格式和模板选择。</span>
                    <div>
                        <RadioGroup v-model="issueForm.activityCover">
                            <Radio label="模板封面">
                                <span>模板封面</span>
                            </Radio>
                            <Radio label="自定义封面">
                                <span>自定义封面</span>
                            </Radio>
                        </RadioGroup>
   
                    </div>
                    <uploadPicture @beforeUpload="beforeUploadM" :max-count="1" :images="''" ref="asd"></uploadPicture>
                    <div class="d-flex mt-8" v-show="issueForm.activityCover === '模板封面'">
                        <div :key="index" v-for="(item,index) in templatePictureList" class="image-container mr-8 " @click="clickOnTemplatePicture(item, templatePictureList)">
                            <img :src="item.templateImage" class="base-image cursor-pointer" />
                            <img v-if="item.isSelect" :src="selectedImage" class="overlay-image cursor-pointer" />
                            <img v-else :src="unselectedImage" class="overlay-image cursor-pointer" />
                        </div>
                    </div>
                </FormItem>
                <FormItem style="width: 1000px" label="宣讲会内容" prop="content" key="14">
                    <quill-editor ref="myQuillEditor" v-model="issueForm.content" :options="editorOption" class="my-quill-editor heig_max"></quill-editor>
                </FormItem>
                <FormItem label="">
                    <el-button type="primary" @click="publish">提交申请</el-button>
                </FormItem>
            </Form>
        </div>
        <div class="mask d-flex-align-center" v-if="showMarsk">
            <div class="bg-color-white m-auto br_4p pb-20 pl-20 pr-20 pt-8">
                <div class="text-right">
                    <h2><i class="el-icon-circle-close fs-34" @click="closeMask"></i></h2>
                </div>
                <doubleSelectionMeetingInfo
                    :activityCover="issueForm.activityCover"
                    :activityOrganizer="issueForm.activityOrganizer"
                    :contactPerson="issueForm.contactPerson"
                    :contactPhone="issueForm.contactPhone"
                    :activactivityStartTimeityCover="activityTime[0]"
                    :activityEndTime="activityTime[1]"
                    :applicationStartTime="applicationTime[0]"
                    :applicationEndTime="applicationTime[1]"
                    :activityName="issueForm.activityName"
                    :attendMethod="issueForm.attendMethod"
                    :doubleSelectionMeetingDetails="issueForm.illustrate"
                    :fullAddress="issueForm.fullAddress"
                    :email="issueForm.email"
                ></doubleSelectionMeetingInfo>
            </div>
        </div>
        <!-- 意向院系和专业 -->
        <el-dialog :visible.sync="intentionVisible">
            <template #title>
                <div style="display: flex;align-items: center;font-size: 0.09375rem;">
                    <div style="font-weight: 700;">请选择意向院系和专业</div>
                    <div style="padding-left: 20px;color: rgba(51, 51, 51, 0.4);font-size: 0.09rem;;">最多选择10项专业</div>
                </div>
            </template>
            <div class="fs-14 intention-visible">
                <div class="visible-box">
                    <div id="profession-title">已选专业</div>
                    <div class="box-profession">
                        <ul style="max-height: 80px;overflow-y: scroll;">
                            <li  v-for="(item) in 50" :key="item">专科 机电一体化</li>
                            <li>专科 数控技术</li>
                            <li>专科 大数据与会计</li>
                        </ul>
                    </div>
                </div>
                <!-- 查询专业 -->
                <div class="query-profession-box">
                    <div class="query-profession">
                        <el-input placeholder="输入专业名称" v-model="professionQuery">
                            <div slot="append">
                                <el-button class="profession-query-button">搜索</el-button>
                            </div>
                        </el-input>
                    </div>
                </div>
                <div class="mt-12" style="max-height: 200px;overflow-y: scroll;">
                   <div class="technology-box">
                    <div class="technology-title">{{ collegeList['a'].name }}</div>
                    <div class="technology-a">
                        <ul>
                            <li v-for="(item,index) in collegeList['a'].list" :key="index">
                                <el-checkbox class="li-checkbox" v-model="item.checked" :label="item.value" border size="mini"></el-checkbox>
                            </li>
                        </ul>
                    </div>
                   </div>
                   <div class="technology-box">
                    <div class="technology-title">{{ collegeList['b'].name }}</div>
                    <div class="technology-b">
                        <ul>
                            <li v-for="(item,index) in collegeList['b'].list" :key="index">
                                <el-checkbox class="li-checkbox" v-model="item.checked" :label="item.value" border size="mini"></el-checkbox>
                            </li>
                        </ul>
                    </div>
                   </div>
                   <div class="technology-box">
                    <div class="technology-title">{{ collegeList['c'].name }}</div>
                    <div class="technology-b">
                        <ul>
                            <li v-for="(item,index) in collegeList['c'].list" :key="index">
                                <el-checkbox class="li-checkbox" v-model="item.checked" :label="item.value" border size="mini"></el-checkbox>
                            </li>
                        </ul>
                    </div>
                   </div>
                   <div class="technology-box">
                    <div class="technology-title">{{ collegeList['d'].name }}</div>
                    <div class="technology-b">
                        <ul>
                            <li v-for="(item,index) in collegeList['d'].list" :key="index">
                                <el-checkbox class="li-checkbox" v-model="item.checked" :label="item.value" border size="mini"></el-checkbox>
                            </li>
                        </ul>
                    </div>
                   </div>
                </div>
                <div class="box-submit" style="height: 70px">
                    <el-button style="float: right" @click="intentionVisible = false">取消</el-button>
                    <el-button type="primary" style="float: right; margin-left: 12px" @click="topSubmit">确定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import uploadPicture from '@/components/uploadPicture/uploadPicture16.vue';
import doubleSelectionMeetingInfo from '@/components/viewDoubleSelectionMeetingInfo.vue';
import { publishAPI, saveForReviewAPI, getAllPlaceAPI, modifyTheDualMeetingAPI } from '../../../api/bys/recruitmentManagement/index';
import { getProvinceAPI, getCityAPI, imageUploadDataApi } from '../../../api/bys/index';
import moment from 'moment';
import { de } from 'date-fns/locale';
import { updateVal } from '@/util/ObjectUtil';

// templateImage :页面展示图片
// templateImageURL 下载的路径，为public目录下的images

// TODO 宣讲会表单
const issueForm = {
    unitName: "",// 单位名称
    creditCode: "",// 统一社会信用代码
    associatedPosition: "",// 关联职位
    presentationTime: [new Date() , null],// 宣讲时间
    expectNumber: "",// 期望学生人数
    scopeOfPresentation: "校级宣讲会",// 宣讲范围
    intention: {
        faculty: [],// 意向院系
        profession: []// 意向专业
    },// 意向院系及专业
    faculty: "",// 意向院系
    homeCampus: "",// 所属校区
    venue: "",// 举办场地
    contactPerson: "",// 联系人
    contactNumber: "",// 联系电话
    contactPhone: "",// 联系人手机号
    attendee: "",// 企业参会人数
    activityCover: "自定义封面",// 活动封面
    content: "",// 宣讲会内容
    isShare: false //是否对外共享
};
// TODO 富文本编译器
const editorOption = {
    // 占位配置
    placeholder: '请输入...',
    height: '300px',
    modules: {
        // 配置工具栏
        toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            ['image', 'link'], // 链接、图片、视频
            [{ align: [] }], // 添加居中按钮
            [{ color: [] }] // 文字颜色按钮
        ]
        // // 更改插入的图片大小
        // imageResize: {
        //     displayStyles: {
        //         backgroundColor: "black",
        //         border: "none",
        //         color: "white",
        //     },
        //     modules: ["Resize", "DisplaySize", "Toolbar"],
        // }
    }
};
export default {
    components: { uploadPicture, doubleSelectionMeetingInfo },
    data() {
        const validateApplicationTime = (rule, value, callback) => {
            if (this.applicationTime[0] && this.applicationTime[1]) {
                if(!this.isUpdate){
                    let data =new Date();
                    let dataTimeNow = moment(data).format('YYYY-MM-DD HH:mm:ss');
                    let dataTimebegin = moment(this.applicationTime[0]).format('YYYY-MM-DD HH:mm:ss');
                    console.log("开始时间",dataTimebegin)
                    console.log("当前时间",dataTimeNow)
                    if(dataTimebegin >= dataTimeNow){
                        if (this.applicationTime[1] <= this.applicationTime[0]) {
                            callback(new Error('截止时间必须在开始时间之后'));
                        } else {
                            // 检查有无举办时间
                            if (this.activityTime[0] && this.activityTime[1]) {
                                if (this.applicationTime[1] >= this.activityTime[0]) {
                                    callback(new Error('截止时间须在开始时间之前'));
                                } else {
                                    callback();
                                }
                            } else {

                            }
                        }
                    }else{
                        callback(new Error('宣讲时间不能早于当前时间'));
                    }
                }else{
                    // 无举办时间
                    callback();
                }
            } else {
                callback(new Error('请填写完整的宣讲时间'));
            }
        };
        const chackVenue = (rule, value, callback) => {
            if (this.issueForm.venue) {
                callback();
            } else {
                callback(new Error('举办场地不能为空'));
            }
        };
        return {
            collegeList: {
                a: {
                    name: "智能制造学院",
                    list: [{
                            value: '机电一体化技术',
                            checked: false
                        },{
                            value: '电气自动化技术',
                            checked: false
                        },{
                            value: '机械设计与制造',
                            checked: false
                        },{
                            value: '数控技术',
                            checked: false
                        },{
                            value: '电气自动化技术',
                            checked: false
                        },{
                            value: '机械设计与制造',
                            checked: false
                    }]
                },
                b: {
                    name: "财经学院",
                    list: [{
                            value: '大数与会计',
                            checked: false
                        },{
                            value: '电气自动化技术',
                            checked: false
                        },{
                            value: '机械设计与制造',
                            checked: false
                        },{
                            value: '金融服务与管理',
                            checked: false
                        },{
                            value: '电气自动化技术',
                            checked: false
                        },{
                            value: '机械设计与制造',
                            checked: false
                    }]
                },               
                c: {
                    name: "财经学院",
                    list: [{
                            value: '大数与会计',
                            checked: false
                        },{
                            value: '电气自动化技术',
                            checked: false
                        },{
                            value: '机械设计与制造',
                            checked: false
                        },{
                            value: '金融服务与管理',
                            checked: false
                        },{
                            value: '电气自动化技术',
                            checked: false
                        },{
                            value: '机械设计与制造',
                            checked: false
                    }]
                },
                d: {
                    name: "财经学院",
                    list: [{
                            value: '大数与会计',
                            checked: false
                        },{
                            value: '电气自动化技术',
                            checked: false
                        },{
                            value: '机械设计与制造',
                            checked: false
                        },{
                            value: '金融服务与管理',
                            checked: false
                        },{
                            value: '电气自动化技术',
                            checked: false
                        },{
                            value: '机械设计与制造',
                            checked: false
                    }]
                },
            },
            professionQuery: "",// 请选择意向院系和专业 查询框
            intentionVisible: false,
            // 模板图片
            templatePictureList: [
                { id: 0, templateImage: require('@/views/recruitmentManagement/mutualSelection/images/模板0.png'), templateImageURL: 'images/模板0.png', isSelect: false },
                { id: 1, templateImage: require('@/views/recruitmentManagement/mutualSelection/images/模板1.png'), templateImageURL: 'images/模板1.png', isSelect: false },
                { id: 2, templateImage: require('@/views/recruitmentManagement/mutualSelection/images/模板2.png'), templateImageURL: 'images/模板2.png', isSelect: false },
                { id: 3, templateImage: require('@/views/recruitmentManagement/mutualSelection/images/模板3.png'), templateImageURL: 'images/模板3.png', isSelect: false },
                { id: 4, templateImage: require('@/views/recruitmentManagement/mutualSelection/images/模板4.png'), templateImageURL: 'images/模板4.png', isSelect: false }
            ],
            selectFormData: new FormData(),
            isSelectedImage: false,
            selectedImage: require('@/views/recruitmentManagement/mutualSelection/images/选中.png'),
            unselectedImage: require('@/views/recruitmentManagement/mutualSelection/images/未选中.png'),
            materialUpload: (rule, value, callback) => {
                if ((this.$refs.asd.imgList.length <= 0 || this.issueForm.activityCover == null) && !this.isSelectedImage) {
                    callback();
                } else {
                    callback();
                }
            },
            issueRules: {
                unitName: [{ required: true, message: '单位名称不能为空', trigger: 'blur' }],
                creditCode: [{ required: true, message: '统一社会信用代码不能为空', trigger: 'blur' }],
                expectNumber: [{ required: true, message: '期望学生人数不能为空', trigger: 'blur' }],
                scopeOfPresentation: [{ required: true, message: '宣讲范围不能为空', trigger: 'blur' }],
                attendee: [{ required: true, message: '企业参会人数不能为空', trigger: 'blur' },],
                homeCampus: [{ required: true, message: '所属校区不能为空', trigger: 'change' }],
                venue: [{ required: true, validator: chackVenue, trigger: 'change' }],
                contactPerson: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
                faculty: [{ required: true, message: '意向院系及专业不能为空', trigger: 'change' }],
                intention: [{ required: true, message: '意向院系及专业不能为空', trigger: ['blur','change'] }],
                contactPhone: [
                    { required: true, message: '联系人手机号不能为空', trigger: 'blur' },
                    {
                        pattern: /((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)/,
                        message: '联系人手机号格式不正确',
                        trigger: 'blur'
                    }
                ],
                time: [{ type: 'date', required: true, message: '日期不能为空', trigger: 'change' }],
                applicationTime: [{ required: true, validator: validateApplicationTime, trigger: 'blur' }],
                content: [{ required: true, message: '宣讲会内容不能为空', trigger: 'blur' }]
            },
            activityTime: ['', ''],
            applicationTime: ['', ''],
            text: '',
            isShow: true,
            type: 1,
            showType: '',
            dialogTableVisible: true,
            issueForm,
            editorOption,
            provinceList: [],
            cityList: [],
            placeSelections: [],
            showMarsk: false,
            isUpdate:false,

            // 测试
            checked: true
        };
    },

    computed: {
        getAttendMethod: function() {
            return this.issueForm.attendMethod;
        }
    },
    watch: {
        getAttendMethod: {
            handler() {
                if (this.issueForm.attendMethod === '线上活动') {
                    this.isShow = false;
                    console.log(this.isShow);
                } else {
                    this.isShow = true;
                    console.log(this.isShow);
                }
            }
        },
        // 监听城市数据的变化，跟着省级数据的转变改变市级数据
        'issueForm.locationProvince'() {
            if(this.text !== '编辑宣讲会'){
                this.issueForm.locationCity = '';
            }
            this.getCity();
        },
        'issueForm.attendMethod': function(newVal) {
            immediate: true;
            if (newVal === '现场活动') {
                this.showType = true;
            }
            if (newVal === '线上活动') {
                this.showType = false;
            }
        }
    },
    created() {
        console.log('created');
    },
    async mounted() {
        const reponse = {};
        if(reponse.code == 200){
            this.provinceList = reponse.result;

            // 添加活动报名默认时间
            // 创建一个表示明天的Date对象
            let tomorrow = new Date();
            // tomorrow.setDate(tomorrow.getDate() + 1);
            tomorrow.setMinutes(tomorrow.getMinutes() + 30);
            // 将日期对象转换为字符串
            this.applicationTime[0] = tomorrow;
            this.issueForm.applicationStartTime = moment(this.applicationTime[0]).format('YYYY-MM-DD HH:mm:ss');
            // let tomorrow1 = new Date();
            // tomorrow1.setDate(tomorrow1.getDate() + 2);
            // tomorrow1.setHours(23, 59, 59, 59);
            // this.applicationTime[1] = tomorrow1;
            // this.issueForm.applicationEndTime = moment(this.applicationTime[1]).format('YYYY-MM-DD HH:mm:ss');
            //
            console.log(this.showType, '0');
            this.$refs.asd.imgList.length = 0;
            if (this.$route.query.routeParams) {
                this.issueForm = JSON.parse(this.$route.query.routeParams);
                if (this.issueForm.attendMethod === '线上活动') {
                    this.$nextTick(() => {
                        this.showType = false;
                    });
                } else {
                    this.$nextTick(() => {
                        this.showType = true;
                    });
                }
                this.type = 2;
                console.log(this.issueForm, '111');
                this.text = '编辑宣讲会';
                this.isUpdate=true
                this.activityTime = [this.issueForm.activityStartTime, this.issueForm.activityEndTime];
                this.applicationTime = [this.issueForm.applicationStartTime, this.issueForm.applicationEndTime];
                this.$refs.asd.imgList.push(this.issueForm.activityCover);
            } else {
                this.type = 1;
                this.text = '发布宣讲会';
                this.isUpdate=false
                this.$refs.asd.imgList.length = 0;
                if (this.issueForm.attendMethod === '线上活动') {
                    this.$nextTick(() => {
                        this.showType = false;
                    });
                } else {
                    this.$nextTick(() => {
                        this.showType = true;
                    });
                }
            }
        }


    },

    methods: {
        // TODO 意向选择
        intentionSelect(){
            const _this = this;
            _this.intentionVisible = true;
        },
        beforeUploadM(){
            this.$refs.issueRef.validateField('activityCover')
            this.issueForm.activityCover=this.$refs.asd.imgList[0]
        },
        clickOnTemplatePicture(item, allItem) {
            for (let i = 0; i < allItem.length; i++) {
                if (item.id === allItem[i].id) {
                    allItem[i].isSelect = !allItem[i].isSelect;
                    this.isSelectedImage = allItem[i].isSelect === true;
                    // 将图片路径转换为Blob对象
                    const name = '模板' + i + '.png';
                    fetch(item.templateImageURL)
                        .then(response => response.blob())
                        .then(blob => {
                            // 创建FormData对象
                            // 将Blob对象添加到FormData对象中
                            this.selectFormData.append('file', blob, name);

                        });
                    // this.issueForm.activityCover=item.templateImageURL
                    this.$refs.issueRef.validateField('activityCover');
                } else {
                    allItem[i].isSelect = false;
                }
            }
        },

        dateChangeA() {
            this.issueForm.applicationStartTime = moment(this.applicationTime[0]).format('YYYY-MM-DD HH:mm:ss');
            // this.$refs.issueRef.validate();
        },
        dateChangeB() {
            this.issueForm.applicationEndTime = moment(this.applicationTime[1]).format('YYYY-MM-DD HH:mm:ss');
            // this.$refs.issueRef.validate();
        },
        dateChangeC() {
            this.issueForm.activityStartTime = moment(this.activityTime[0]).format('YYYY-MM-DD HH:mm:ss');
            // this.$refs.issueRef.validate();
        },
        changeDateC() {
            // let selectedDate = new Date(this.activityTime[0]);
            // selectedDate.setHours(8, 0, 0);
            // this.activityTime[0] = selectedDate;
            this.issueForm.activityStartTime = moment(this.activityTime[0]).format('YYYY-MM-DD HH:mm:ss');
        },
        dateChangeD() {
            this.issueForm.activityEndTime = moment(this.activityTime[1]).format('YYYY-MM-DD HH:mm:ss');
            // this.$refs.issueRef.validate();
        },
        changeDateB() {
            // let selectedDate = new Date(this.activityTime[1]);
            // selectedDate.setHours(23, 59, 59);
            // this.activityTime[1] = selectedDate;
            this.issueForm.activityEndTime = moment(this.activityTime[1]).format('YYYY-MM-DD HH:mm:ss');
        },
        //修改双选会
        modification() {
            this.$refs.issueRef.validate(async valid => {
                if (valid) {
                    // 校验文件大小
                    if (this.$refs.asd.formFile.length > 0) {
                        console.log(this.$refs.asd.formFile[0].size, '文件大小');
                        if (this.$refs.asd.formFile[0].size > 1024 * 1024 * 10) {
                            this.$message.error('图片大小不能超过10M');
                            return false;
                        }
                    }

                    if (this.issueForm.activityStartTime && this.issueForm.activityEndTime && this.issueForm.applicationStartTime && this.issueForm.applicationEndTime) {
                        if (this.issueForm.applicationEndTime >= this.issueForm.activityStartTime) {
                            this.$message.error('截止时间须在开始时间之前');
                        } else {
                            if (this.$refs.asd.formFile.length > 0) {
                                //上传证明材料
                                const formData = new FormData();
                                formData.append('file', this.$refs.asd.formFile[0]);
                                const uploadResponse = await imageUploadDataApi(formData);
                                if (uploadResponse.code == 200) {
                                    console.log('文件地址', uploadResponse);
                                    this.issueForm.activityCover = uploadResponse.result;
                                }
                            }

                            if (this.isSelectedImage && this.$refs.asd.formFile.length <= 0) {
                                const uploadResponse = await imageUploadDataApi(this.selectFormData);
                                if (uploadResponse.code == 200) {
                                    console.log('文件地址', uploadResponse);
                                    this.issueForm.activityCover = uploadResponse.result;
                                }
                            }
                            const uploadResponse2 = await modifyTheDualMeetingAPI(this.issueForm);
                            if (uploadResponse2.code == 200) {
                                if (uploadResponse2.success) {
                                    this.$message.success('修改成功');
                                    await this.$router.back();
                                }
                            }
                        }
                    } else {
                        this.$message.error('时间不能为空');
                    }
                } else {
                    this.$message.error('请完善相关信息！');
                    return false;
                }
            });
            // modifyTheDualMeetingAPI(this.issueForm).then(res => {
            //   if (res.success){
            //     this.$message.success(res.message)
            //   }
            // })
        },
        // region TODO 省市数据
        getProvince() {
            getProvinceAPI().then(res => {
                console.log(res, '省级');
                this.provinceList = res.result;
            });
        },
        getCity() {
            let newData = this.provinceList.filter(item => item.name === this.issueForm.locationProvince); //返回对象
            console.log(this.provinceList)
            console.log(this.issueForm.locationProvince)
            console.log(newData);
            getCityAPI({
                provinceId: newData[0].id
            }).then(res => {
                console.log(res, '市级');
                this.cityList = res.result;
            });
        },
        // endregion
        // region TODO 查询场地
        getAllPlace() {
            getAllPlaceAPI().then(res => {
                if (res.success) {
                    console.log(res, '场地列表');
                    this.placeSelections = res?.result || [];
                } else {
                    this.placeSelections = '暂无数据';
                }
            });
        },
        // endregion
        save() {
            this.$refs.issueRef.validate(async valid => {
                if (valid) {
                    // 校验文件大小
                    if (this.$refs.asd.formFile.length > 0) {
                        console.log(this.$refs.asd.formFile[0].size, '文件大小');
                        if (this.$refs.asd.formFile[0].size > 1024 * 1024 * 10) {
                            this.$message.error('图片大小不能超过10M');
                            return false;
                        }
                    }

                    if (this.issueForm.activityStartTime && this.issueForm.activityEndTime && this.issueForm.applicationStartTime && this.issueForm.applicationEndTime) {
                        if (this.issueForm.applicationEndTime >= this.issueForm.activityStartTime) {
                            this.$message.error('截止时间须在开始时间之前');
                        } else {
                            //上传证明材料
                            const formData = new FormData();
                            let uploadResponse = null;

                            if (this.$refs.asd.formFile.length > 0) {
                                formData.append('file', this.$refs.asd.formFile[0]);
                                uploadResponse = await imageUploadDataApi(formData);
                                this.$Message.info(uploadResponse.message);
                            }
                            if (this.isSelectedImage && this.$refs.asd.formFile.length <= 0) {
                                uploadResponse = await imageUploadDataApi(this.selectFormData);
                                this.$Message.info(uploadResponse.message);
                            }
                            if (uploadResponse.code == 200) {
                                console.log('文件地址', uploadResponse);
                                this.issueForm.activityCover = uploadResponse.result;
                                const uploadResponse2 = await saveForReviewAPI(this.issueForm);
                                if (uploadResponse2.code == 200) {
                                    if (uploadResponse2.success) {
                                        const formData={
                                            activityName: '', //活动名称
                                            activityCover: '1', //活动封面
                                            locationCity: '', //举办城市  市
                                            locationProvince: '', //举办城市 省份
                                            fullAddress: '', //举办地点 详细地址
                                            activityOrganizer: '', //主办单位
                                            activityUndertaker: '', //承办单位
                                            assistedOrganizer: '', //协办单位
                                            attendMethod: '现场活动', //活动类型
                                            remarks: '', //学生参与方法
                                            anticipateNumber: '', //预计用人单位规模
                                            activityStartTime: '', //活动开始时间
                                            activityEndTime: '', //活动结束时间
                                            applicationStartTime: '', //活动报名开始时间
                                            applicationEndTime: '', //活动报名结束时间
                                            venue: '', //举办场地
                                            illustrate: '', //招聘会说明
                                            contactPerson: '', //联系人
                                            contactPhone: '', //联系方式
                                            email: '', //活动邮箱
                                            isShare: false //是否对外共享
                                        }
                                        updateVal(this.issueForm,formData)
                                        this.$message.success('保存成功');
                                        await this.$router.back();
                                    }
                                }
                            }
                        }
                    } else {
                        this.$message.error('时间不能为空');
                    }
                } else {
                    this.$message.error('请完善相关信息！');
                    return false;
                }
            });
        },
        publish() {
            this.$refs.issueRef.validate(async valid => {
                if (valid) {
                    if (this.$refs.asd.formFile.length > 0) {
                        console.log(this.$refs.asd.formFile[0].size, '文件大小');
                        if (this.$refs.asd.formFile[0].size > 1024 * 1024 * 10) {
                            this.$message.error('图片大小不能超过10M');
                            return false;
                        }
                    }
                    if (this.issueForm.activityStartTime && this.issueForm.activityEndTime && this.issueForm.applicationStartTime && this.issueForm.applicationEndTime) {
                        if (this.issueForm.applicationEndTime >= this.issueForm.activityStartTime) {
                            this.$message.error('截止时间须在开始时间之前');
                        } else {
                            // this.issueForm.activityCover = '1'
                            // const uploadResponse2 = await publishAPI(this.issueForm)
                            // if (uploadResponse2.code == 200){
                            //   if (uploadResponse2.success){
                            //     this.$message.success('保存并发布成功')
                            //     await this.$router.back()
                            //   }
                            // }
                            const formData = new FormData();
                            let uploadResponse = null;

                            if (this.$refs.asd.formFile.length > 0) {
                                console.log("file",this.$refs.asd.formFile[0])
                                formData.append('file', this.$refs.asd.formFile[0]);
                                uploadResponse = await imageUploadDataApi(formData);
                                this.$Message.info(uploadResponse.message);
                            }
                            if (this.isSelectedImage && this.$refs.asd.formFile.length <= 0) {
                                uploadResponse = await imageUploadDataApi(this.selectFormData);
                                this.$Message.info(uploadResponse.message);
                            }

                            if (uploadResponse?.code == 200) {
                                console.log('文件地址', uploadResponse);
                                this.issueForm.activityCover = uploadResponse.result;
                                const uploadResponse2 = await publishAPI(this.issueForm);
                                if (uploadResponse2.code == 200) {
                                    if (uploadResponse2.success) {
                                        this.$message.success('保存并发布成功');
                                        const formData={
                                            activityName: '', //活动名称
                                            activityCover: '1', //活动封面
                                            locationCity: '', //举办城市  市
                                            locationProvince: '', //举办城市 省份
                                            fullAddress: '', //举办地点 详细地址
                                            activityOrganizer: '', //主办单位
                                            activityUndertaker: '', //承办单位
                                            assistedOrganizer: '', //协办单位
                                            attendMethod: '现场活动', //活动类型
                                            remarks: '', //学生参与方法
                                            anticipateNumber: '', //预计用人单位规模
                                            activityStartTime: '', //活动开始时间
                                            activityEndTime: '', //活动结束时间
                                            applicationStartTime: '', //活动报名开始时间
                                            applicationEndTime: '', //活动报名结束时间
                                            venue: '', //举办场地
                                            illustrate: '', //招聘会说明
                                            contactPerson: '', //联系人
                                            contactPhone: '', //联系方式
                                            email: '', //活动邮箱
                                            isShare: false //是否对外共享
                                        }
                                        updateVal(this.issueForm,formData)
                                        await this.$router.back();
                                    }
                                }
                            }

                            // this.$confirm('是否确定保存并发布?', '提示', {
                            //   confirmButtonText: '确定',
                            //   cancelButtonText: '取消',
                            //   type: 'warning'
                            // }).then(() => {
                            //   publishAPI(this.issueForm).then((res) => {
                            //     if (res.success) {
                            //       this.$message({
                            //         type: 'success',
                            //         message: '保存并发布成功'
                            //       });
                            //       this.$router.back()
                            //     } else {
                            //       this.$message({
                            //         type: 'error',
                            //         message: '保存失败，请联系管理员'
                            //       });
                            //     }
                            //   })
                            // }).catch(() => {
                            //   this.$message({
                            //     type: 'info',
                            //     message: '已取消操作'
                            //   });
                            // });
                        }
                    } else {
                        this.$message.error('时间不能为空');
                    }
                } else {
                    this.$message.error('请完善相关信息！');
                    return false;
                }
            });
        },
        openMask() {
            console.log(this.$refs.asd.formFile[0]);
            this.showMarsk = true;
        },
        closeMask() {
            this.showMarsk = false;
        }
    }
};
</script>
<style scoped lang="less">
.intention-visible {
    transform: translateY(-25px);
    padding-left: 0 !important;
    .visible-box {
        display: flex;
        flex-wrap: wrap;
        padding: 10px 0;
        margin-bottom: 10px;
        border-top: 1px solid rgb(240, 240, 240);
        border-bottom: 1px solid rgb(240, 240, 240);
        #profession-title {
            width: 10%;
            padding-right: 10px;
            box-sizing: border-box;
        }
        .box-profession {
            width: 90%;
            ul {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                li {
                    margin-bottom: 10px;
                    width: fit-content;
                    margin-right: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 5px 0 10px;
                    background-color: rgba(54, 164, 252, 0.1);
                    cursor: pointer;
                    transition: .3s;
                    &:hover {
                        opacity: .7
                    }
                }
            }
        }
    }
}
.query-profession-box{
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 5px;
    .query-profession {
        width: 55%;
        .profession-query-button {
            color: #FFFFFF !important;
            background-color: #409EFF !important;
            border-radius: 0 5px 5px 0 !important;
            border-color: #409EFF !important;
            transform: scale(1.05);
            position: relative;
            top: -0.5px;
            transition: .3s;
            cursor: pointer;
            &:hover {
                opacity: .7;
            }
        }
    }
}
.technology-box {
    display: flex;
    margin: 10px 0;
    padding-top: 15px;
    .technology-title {
        width: 10%;
        color: rgba(51, 51, 51, 0.4);
    }
    .technology-a,.technology-b {
        width: 90%;
        padding: 0 20px;
        box-sizing: border-box;
        ul {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            li {
                width: 200px;
                margin-bottom: 15px;
                .li-checkbox {
                    width: 100%;
                }
            }
        }
    }
}
.box-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgb(240, 240, 240);
    padding-top: 45px;
}
/* 编辑器高度及背景色 */
::v-deep .ql-editor {
    min-height: 300px;
    background-color: #fff;
}
::v-deep .ql-snow .ql-tooltip[data-mode='link']::before {
    content: '进入链接';
}
::v-deep .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    content: '保存';
}
.heig_max {
    max-height: 600px;
}
::v-deep .ql-editor {
    max-height: 500px;
}
.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}
::v-deep .el-icon-circle-close {
    color: rgba(0, 0, 0, 1) !important;
}

.image-container {
    position: relative;
    display: inline-block; /* 或者其他适合你布局的display类型 */
}

.base-image {
    /* 设置基础图片的样式，如宽度、高度等 */
}

.overlay-image {
    position: absolute;
    top: 4px;
    right: 4px;
    /* 设置覆盖图片的样式，如宽度、高度等 */
}
.box-intention {
    box-sizing: border-box;
    padding-top: 1px;
    span {
        color: #409EFF;
        font-weight: 600;
        cursor: pointer;
        transition: .3;
        &:hover {
            opacity: .7;
        }
    }
}
.intention {    
    .intention-title {
        color: rgba(51, 51, 51, 0.5);
        &:nth-child(1) {
            margin-top: 10px;
        }
    }
    .intention-a {
        margin-bottom: 20px;
    }
    .intention-a,.intention-b {
        ul {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            li {
                margin-bottom: 10px;
                border-radius: 5px;
                width: fit-content;
                margin-right: 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 5px 0 10px;
                background-color: rgba(54, 164, 252, 0.1);
                span {
                    padding-right: 5px;
                }
                i {
                    cursor: pointer;
                    color: rgba(51, 51, 51, 0.5);
                    transition: .3s;
                    &:hover {
                        opacity: .7
                    }
                }
            }
        }
    }
}
</style>
